document.addEventListener('DOMContentLoaded', function () {
    // 获取元素
    const title = document.querySelector('#title');
    const todolist = document.querySelector('#todolist');
    const donelist = document.querySelector('#donelist');
    const todocount = document.querySelector('#todocount');
    const donecount = document.querySelector('#donecount');

    // 注册事件
    // 添加
    title.addEventListener('keydown', function (e) {
        // 回车时
        if (e.keyCode == 13) {
            if (this.value.trim() == '') return alert('请输入数据');
            let data = getData();
            data.push({ title: this.value, done: false });
            saveData(data);
            this.value = '';
            load();
        }
    });

    // 删除
    [todolist, donelist].forEach(el => {
        el.addEventListener('click', function (e) {
            if (e.target.nodeName == 'A') {
                let index = e.target.dataset.index;
                let data = getData();
                // 删除数据
                data.splice(index, 1);
                saveData(data);
                load();
            }
        })
    });

    // 选中
    [todolist, donelist].forEach(el => {
        el.addEventListener('click', function (e) {
            if (e.target.nodeName == 'INPUT' && e.target.type == 'checkbox') {
                let index = e.target.parentNode.children[e.target.parentNode.children.length - 1].dataset.index;
                let data = getData();
                data[index].done = e.target.checked;
                saveData(data);
                load();
            }
        })
    });

    // 修改
    [todolist, donelist].forEach(el => {
        el.addEventListener('dblclick', function (e) {
            if (e.target.nodeName == 'P') {
                let text = e.target.textContent;
                e.target.innerHTML = `<input type="text" value="${text}">`;
                e.target.querySelector('input').focus();
                // 失去焦点时
                e.target.querySelector('input').addEventListener('blur', function () {
                    let index = e.target.parentNode.children[e.target.parentNode.children.length - 1].dataset.index;
                    let data = getData();
                    data[index].title = e.target.querySelector('input').value;
                    saveData(data);
                    load();
                });
                // 回车时
                e.target.querySelector('input').addEventListener('keyup', function (ev) {
                    if (ev.keyCode == 13)
                        e.target.querySelector('input').blur();
                });
            }
        })
    });

    // 本地存储
    // 获取
    function getData() {
        data = localStorage.getItem('todoList');
        if (null == data) return [];
        return JSON.parse(data);
    }

    // 存储
    function saveData(data) {
        localStorage.setItem('todoList', JSON.stringify(data));
    }

    // 显示
    load(); //初始化
    function load() {
        let data = getData();
        [todolist, donelist].forEach(el => el.innerHTML = '');
        let tcount = 0;
        let dcount = 0;
        data.forEach((el, i) => {
            if (el.done) {
                dcount++;
                donelist.insertAdjacentHTML('afterbegin', `<li><input type="checkbox" checked><p>${el.title}</p><a href="javascript:;" data-index="${i}"></a></li>`);
            } else {
                tcount++;
                todolist.insertAdjacentHTML('afterbegin', `<li><input type="checkbox"><p>${el.title}</p><a href="javascript:;" data-index="${i}"></a></li>`);
            }
        });
        todocount.innerHTML = tcount;
        donecount.innerHTML = dcount;
    }
});